<div class="box data_box" style="background: #ffffff">
    <h3 style="margin-left: 30px;padding-bottom: 10px;" >
        员工管理
        <button type="button" class="btn btn-default" style="float: right; margin-right: 20px;" @click="addEmp" >添加员工</button>
        <button type="button" class="btn btn-primary" style="float: right; margin-right: 20px;"  @click="deleteEmps" >批量删除</button>
    </h3>
    <div class="box-body table-responsive no-padding">
        <table class="table table-bordered ">
            <tr style="background: #5bc0de">
                <td style="width: 60px;"  ><input type="checkbox" id="checkAll"  @click="checkEmpIds" >全选</td>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>入职时间</th>
                <th>工资岗位</th>
                <th>联系电话</th>
                <th>联系地址</th>
                <th>月薪</th>
                <th>工作状态</th>
                <th>直系领导ID</th>
                <th>操作</th>
            </tr>
            <tbody id="tbodyId">
            <tr v-for ="item in emplist">
                <td ><input type="checkbox" id="empIds" name="empIds"  class="empIds" :value="item.id" ></td>
                <td>{{item.id }}</td>
                <td>{{item.name }}</td>
                <td>{{item.sex | changesex }}</td>
                <td>{{item.age }}</td>
                <td>{{item.starttime | subTime }}</td>
                <td>{{item.job }}</td>
                <td>{{item.phone }}</td>
                <td>{{item.address | isNull }}</td>
                <td>{{item.salary }}</td>
                <td>{{item.jobstatus | changjobstatus }}</td>
                <td>{{item.parantid}}</td>
                <td>
                    <button type="button" class="btn btn-success btn-xs"  @click = "empChange(item)" >修改</button>
                    <button v-if ="item.empstatus == '0' " type="button" class="btn btn-warning btn-xs" @click ="empStart(item)" >启用</button>
                    <button v-if ="item.empstatus == '1' " type="button" class="btn btn-danger btn-xs emp-stop"  @click ="empStop(item)" >停用</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 员工添加框 -->
    <div class="modal fade" id="add-emp-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{empModaltitle }}</h4>
                </div>
                <div class="modal-body">
                    <!-- 表单内容 -->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">员工名称</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control emp-name" placeholder="员工名称" v-model ="empItem.name" >
                            </div>
                            <label  class="col-sm-2 control-label">性别名称</label>
                            <div class="col-sm-4">
                                <label><input type="radio" class="emp-sex" name="sex" v-model ="empItem.sex" value="1">男</label>
                                <label><input type="radio" class="emp-sex" name="sex" v-model ="empItem.sex" value="0">女</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control emp-age" placeholder="年龄" v-model ="empItem.age" >
                            </div>
                            <label class="col-sm-2 control-label">入职时间</label>
                            <div class="col-sm-4">
                                <input type="date" class="form-control emp-starttime" v-model ="empItem.starttime" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">职位</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control emp-job" placeholder="职位" v-model ="empItem.job" >
                            </div>
                            <label class="col-sm-2 control-label">联系电话</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control emp-phone" placeholder="联系电话" v-model ="empItem.phone" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">联系地址</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="2"  placeholder="联系地址" v-model = "empItem.address"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">月薪</label>
                            <div class="col-sm-4">
                                <input type="number" min="0" max="10000000" step="0.01" class="form-control" placeholder="月薪" v-model = "empItem.salary">
                            </div>
                            <label class="col-sm-2 control-label">工作状态</label>
                            <div class="col-sm-4">
                                <select class="form-control emp-jobstatus" v-model="empItem.jobstatus" name="jobstatus">
                                    <option value="0">离职</option>
                                    <option value="1">在职</option>
                                    <option value="2">休假</option>
                                </select>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="saveemp">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 分页信息 -->
    <div style="float: right;margin-right: 20px;">
        <ul class="pagination">
            <li><a id="first" @click ="firstPage" >首页 </a></li>
            <li :class =" pageCurrent==1 ? 'disabled' : ''"  @click ="prePage"><a id="pre">上一页  </a></li>
            <li><a>当前页({{pageCurrent }})</a></li>
            <li :class =" pageCurrent== pageCount ? 'disabled' : ''"  @click ="nextPage" ><a id="next">下一页 </a></li>
            <li @click="endPage"><a id="last">尾页</a></li>
            <li ><a>总页数( {{ pageCount }} )</a></li>
        </ul>
    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script type="text/javascript">
    // 文档就绪函数
    $(function(){
        var deptId ;
        try {
            deptId =  $("#mainContentId").data("deptId");
        }catch (e) {

        }
        getList();
         function getList(){
            // 获取开始的15条数据
        $.post("/emp/page",{ startrow : 0 , pagesize : 15 , deptid : deptId},function (res) {
            empVue._data.emplist = res.data;
        })
        // 获取总页数
        $.get("/emp/count",function (res) {
            empVue._data.pageCount = res.data;
        })
         }

        var empVue = new Vue({
            el : ".data_box" ,
            data : {
                emplist : [],
                empModaltitle : "",
                empItem : {},
                pageCurrent : 1, // 当前页
                pageCount : 1 ,  // 总页数
            },filters : {
                isNull : function(str){
                    if(str == null){
                        return '暂无';
                    }else{
                        return str;
                    }
                },
                changesex : function(str){
                    if(str == "0"){
                        return "女"
                    }else if(str == "1"){
                        return "男"
                    }
                },
                changjobstatus : function(str){
                    if(str == "0"){
                        return "离职"
                    }else if(str == "1"){
                        return "在职"
                    }else if(str == "2"){
                        return "休假"
                    }
                },

                subTime : function (str) {
                    if(str != null){
                        return str.substr(0,10);
                    } else{
                        return '暂无';
                    }

                }
            },methods : {
                firstPage : function () { // 首页
                this.pageCurrent = 1;
                this.getEmpList();
            },
            prePage : function () { // 上一页
                if(this.pageCurrent <= 1){
                    return
                }else{
                    this.pageCurrent --;
                    this.getEmpList();
                }
            },
            nextPage : function () { // 下一页
                if(this.pageCurrent >= this.pageCount){
                    return
                }else{
                    this.pageCurrent ++;
                    this.getEmpList();
                }
            }
            ,endPage : function () {  // 尾页
                this.pageCurrent = this.pageCount;
                this.getEmpList();
            },
            getEmpList : function () {
                // 重新获取数据
                var pagesize = 15;
                var startrow  = (this.pageCurrent-1)*pagesize;
                var params = {
                    startrow : startrow,
                    pagesize : pagesize,
                }
                $.post("/emp/page",params,function (res) {
                    empVue._data.emplist = res.data;
                })
            },
                addEmp : function(){
                    this.empModaltitle="员工添加";
                    this.empItem = {};
                    $("#add-emp-modal").modal('show');
                },
                empChange : function (item){
                    this.empModaltitle="员工修改";
                    this.empItem = item;
                    $("#add-emp-modal").modal('show');
                },

                checkEmpIds : function () {
                    //获取thead中checkbox对象状态
                     var flag=$("#checkAll").prop("checked")
                    //修改tbody中checkbox对象状态
                    $("#tbodyId input[type='checkbox']").each(function(){
                    $(this).prop("checked",flag);
                    });
                 },
                deleteEmps : function () {
                // 获取复选框中的值
                var ids=[];
                //2.获取tbody中所有的checkbox
                $("#tbodyId input[type='checkbox']").each(function(){
                    // .each()迭代所有的CheckBox
                    //存储选中的checkbox的值
                    //$(this)代表当前checkbox对象
                    if($(this).prop("checked")){
                        ids.push($(this).val());
                    }
                });
                if(confirm("确认删除？")){
                    var params = {
                        ids : ids.toString(),
                    }
                    $.post("/emp/delete",params,function (res) {
                        if(res.state == 1){
                            alert("删除成功");
                            window.location.reload();
                        }else{
                            alert("删除失败");
                        }
                        getEmpList();
                        $("#tbodyId input[type='checkbox']").each(function(){
                            $(this).prop("checked",false);
                        });
                    });

                }

            },
             saveemp : function(){
                    // 判断新增还是修改
                     var params = {
                         id : this.empItem.id,
                         name : this.empItem.name,
                         sex : this.empItem.sex,
                         age : this.empItem.age,
                         starttime : this.empItem.starttime,
                         job :  this.empItem.job,
                         phone :  this.empItem.phone,
                         address :  this.empItem.address,
                         salary :  this.empItem.salary,
                         jobstatus :  this.empItem.jobstatus,
                         parentid :  this.empItem.parentid,
                         deptid :  deptId,
                     }
                  /*  var  params = this.empItem;*/

                    if(this.empItem.id != null){
                        // 修改
                    /*    this.$http.post("/emp/updata",params).then(function (res) {
                            if(res.data.status == 1){
                                alert("修改成功");
                            }else{
                                alert("修改失败");
                            }

                        });*/ //vue的http请求参数格式默认是(view)对象，后台springmvc接受只能用formData（表单对象）,可以修改，但是麻烦
                        $.post("/emp/updata",params,function(res){
                            if(res.state == 1){
                                alert("修改成功");
                                $("#add-emp-modal").modal('hide');
                            }else{
                                alert("修改失败");
                                $("#add-emp-modal").modal('hide');
                            }
                        });
                    }else{
                        // 新增
                        $.post("/emp/add",params,function(res){
                            if(res.state == 1){
                                alert("添加成功");
                                $("#add-emp-modal").modal('hide');
                            }else{
                                alert("添加失败");
                                $("#add-emp-modal").modal('hide');
                            }
                        });
                    }

                }

            }
        });
    })


</script>